<template>
	<view class="j-price">
		<text class="price-symbol">¥</text>
		<view class="price-content">
			<text class="price-integer">{{ integerPart }}</text>
			<text class="price-decimal" v-if="decimalPart">.{{ decimalPart }}</text>
		</view>
		<text class="original-price" v-if="originalPrice">¥{{ originalPrice }}</text>
	</view>
</template>

<script>
export default {
	name: 'JPrice',
	props: {
		// 当前价格
		price: {
			type: [String, Number],
			required: true
		},
		// 原价（可选）
		originalPrice: {
			type: [String, Number],
			default: null
		},
		// 价格颜色
		priceColor: {
			type: String,
			default: '#fa436a'
		},
		// 原价颜色
		originalPriceColor: {
			type: String,
			default: '#999'
		},
		// 整数部分字体大小
		integerSize: {
			type: String,
			default: '40rpx'
		},
		// 小数部分字体大小
		decimalSize: {
			type: String,
			default: '24rpx'
		},
		// 符号字体大小
		symbolSize: {
			type: String,
			default: '24rpx'
		}
	},
	computed: {
		// 格式化价格，确保有两位小数
		formattedPrice() {
			const price = parseFloat(this.price);
			return isNaN(price) ? '0.00' : price.toFixed(2);
		},
		// 整数部分
		integerPart() {
			return this.formattedPrice.split('.')[0];
		},
		// 小数部分
		decimalPart() {
			return this.formattedPrice.split('.')[1];
		}
	}
};
</script>

<style lang="less" scoped>
.j-price {
	display: flex;
	align-items: flex-end;
	
	.price-symbol {
		font-size: v-bind(symbolSize);
		color: v-bind(priceColor);
		font-weight: bold;
		margin-right: 4rpx;
		line-height: 1;
	}
	
	.price-content {
		display: flex;
		align-items: flex-end;
		
		.price-integer {
			font-size: v-bind(integerSize);
			color: v-bind(priceColor);
			font-weight: bold;
			line-height: 1;
		}
		
		.price-decimal {
			font-size: v-bind(decimalSize);
			color: v-bind(priceColor);
			font-weight: bold;
			line-height: 1;
		}
	}
	
	.original-price {
		font-size: 24rpx;
		color: v-bind(originalPriceColor);
		text-decoration: line-through;
		margin-left: 10rpx;
		line-height: 1;
	}
}
</style>


